<template>
  <div class="audio-panel column q-pa-sm golden-layout-panel no-wrap">
    <div class="top row justify-between items-center no-wrap">
      <q-btn flat :ripple="false" color="accent" no-caps padding="xs">
        <div class="row no-wrap">
          <q-icon name="mdi-plus" />
          <div class="text-no-wrap gt-md">
            {{ $t('video.panels.audio.addTranslationBtn') }}
          </div>
        </div>
      </q-btn>
      <div class="row no-wrap items-center">
        <q-btn dense flat icon="mdi-magnify" color="sub" padding="xs" />
        <q-btn
          dense
          flat
          :icon="viewMode === 'list' ? 'mdi-view-grid' : 'mdi-view-list'"
          color="sub"
          padding="xs"
          @click="viewMode = viewMode === 'list' ? 'grid' : 'list'"
        />
        <q-btn dense flat icon="mdi-filter-menu" color="sub" padding="xs" />
        <q-btn dense flat icon="mdi-sort-variant" color="sub" padding="xs" />
      </div>
    </div>
    <div class="column col" v-if="currentVideo">
      <q-scroll-area v-if="viewMode === 'list'" class="col q-mt-sm fit">
        <q-list>
          <audio-panel-item-v
            v-for="audio in currentVideo.audios"
            :key="audio.id"
            :audio="audio"
          />
        </q-list>
      </q-scroll-area>
      <q-scroll-area v-else class="col q-mt-sm fit">
        <div class="row q-gutter-sm q-pa-sm">
          <audio-panel-item-h
            v-for="audio in currentVideo.audios"
            :key="audio.id"
            :audio="audio"
          />
        </div>
      </q-scroll-area>
    </div>
  </div>
</template>
<script setup lang="ts">
import Video from 'src/models/Video';
import Audio from 'src/models/Audio';
import { ref, computed } from 'vue';
import AudioPanelItemV from './AudioPanelItem.vue';
import AudioPanelItemH from './AudioPanelItem2.vue';
import { useVideoStore } from 'src/stores/video-store';
const videoStore = useVideoStore();
const currentVideo = computed(() => videoStore.currentVideo);
const sorters = ref(['Newest', 'Views', 'Update']);
const selectedSorter = ref(['Newest']);
const viewMode = ref('list');
const showFilterBox = ref(false);
const showSortBox = ref(false);
</script>
